<template>
        <div class="goodsEntry">
          <ul class="query">
            <li class="query-item">
              <el-button type="primary" size="medium" @click="newlybuild">新建仓库</el-button>
            </li>
          </ul>
          <div class="wrapper">
            <el-table class="table" :data="tableData" stripe highlight-current-row border>
              <el-table-column align="center" prop="id" label="序号" width="100">
              </el-table-column>
              <el-table-column align="center" prop="depotName" label="仓库名称">
              </el-table-column>
              <el-table-column align="center" label="仓库缩略图">
                <template slot-scope="scope">
                  <img :src="scope.row.pic" alt="" width="50">
                </template>
              </el-table-column>
              <el-table-column align="center" prop="linkMan" label="联系人">
              </el-table-column>
              <el-table-column align="center" prop="linkWay" label="联系方式">
              </el-table-column>
              <el-table-column align="center" prop="address" label="地址">
              </el-table-column>
              <el-table-column align="center" prop="serviceTime" label="服务时间">
              </el-table-column>
              <el-table-column align="center" prop="status" label="状态">
                 <template slot-scope="scope">
                <span v-html="scope.row.status==0?'正常':'禁用'"></span>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="address" label="操作" width="300">
                <template slot-scope="scope">
                    <el-button @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small" @click="cargo(scope.row)">货位管理</el-button>
                    <el-button type="text" size="small" @click="canceloffOne(scope.row)">删除</el-button>
                    <el-button type="text" size="small" v-if="scope.row.status == 0" @click="stopstatus(scope.row)">禁用</el-button>
                    <el-button type="text" size="small" v-if="scope.row.status == 1" @click="stopstatus(scope.row)">启用</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination background 
            :current-page="page.currentPage"
            :page-size="page.pageSize" 
            :total="page.total" 
            @current-change="handleCurrentChange"
            layout="total,prev, pager, next,jumper" 
           >
            </el-pagination>
          </div>
          <el-dialog :title="newTitle" :visible.sync="goodsCates.show">
              <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="仓库名称" :label-width="formLabelWidth" prop="depotName">
                  <el-input v-model="form.depotName" placeholder="请填写仓库名称" auto-complete="off" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="联系人" :label-width="formLabelWidth" prop="linkMan">
                    <el-input v-model="form.linkMan" placeholder="请填写联系人" auto-complete="off" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" :label-width="formLabelWidth" prop="linkWay">
                    <el-input v-model.number="form.linkWay" placeholder="请填写联系方式" :maxlength="11" auto-complete="off" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="详细地址" :label-width="formLabelWidth" prop="address">
                    <el-input v-model="form.address" placeholder="请填写详细地址" auto-complete="off" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="服务时间" :label-width="formLabelWidth" prop="serviceTime">
                    <el-input v-model="form.serviceTime" placeholder="请填写服务时间" auto-complete="off" style="width:400px"></el-input>
                </el-form-item>
                <el-form-item label="酒窖图片" :label-width="formLabelWidth" prop="file">
                    <el-upload
                    class="upload-demo"
                    :limit="1"
                    drag
                    ref="uploadImg"
                    :action="imgUrl"
                    :headers={Authorization:token}
                    :on-success="handleSuccess"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    :on-exceed="handleExceed"
                    list-type="picture"
                    >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png/jpeg/bmp/gif图片，大小为1031px*552px(仅支持一张)</div>
                  </el-upload>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="goodsCates.show = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
              </div>
            </el-dialog>
        </div>
      </template>
      <script>
        import {isvalidPhone}  from '../../axios/isvalidPhone';
        var validPhone=(rule, value,callback)=>{
            if (!value){
                callback(new Error('请输入电话号码'))
            }else  if (!isvalidPhone(value)){
              callback(new Error('请输入正确的11位手机号码'))
            }else {
                callback()
            }
        }
        export default {
          data() {
            return {
              height: "auto",
              queryData: {
                starttime:'',
                endtime:'',
                keyword:'',
                category:''
              },
              token:localStorage.getItem("token"),
              goodsCates: {
                show: false,
              },
              newTitle:'',
              tableData: [{}],
              form: {
                linkMan:'',
                depotName:'',
                linkWay:'',
                address:'',
                serviceTime: ''
            },
            imgUrl:'',
            fileList: [],
            rules: {
              depotName: [
                { required: true, message: '请输入仓库名称', trigger: 'blur' },
               
              ],
              linkMan: [
                { required: true, message: '请输入联系人', trigger: 'blur' },
                
              ],
              linkWay: [
                { required: true, trigger: 'blur' ,validator: validPhone},
               
              ],
              address: [
                { required: true, message: '请输入地址', trigger: 'blur' },
                
              ],
              serviceTime: [
                { required: true, message: '请输入服务时间', trigger: 'blur' },
                
              ],
            },
            formLabelWidth: '120px',
            page: {
              pageSize: 10,
              currentPage: 1,
              total: 0
            },
            statusid:{}
              
            };
          },
          mounted () {
            this.tableList();
            this.baseUrl();
          },
          methods: {
            baseUrl(){
                let [isTest, href] = [null, window.document.location.href];
                if (href.indexOf("192.168") > -1 || href.indexOf("localhost") > -1 || href.indexOf("36.7") > -1) {
                isTest = true
                } else {
                isTest = false
                }
                if(isTest){
                   this.imgUrl =  'http://192.168.3.71:8013/api/pic/uploadPic'  
                }else{
                  this.imgUrl = 'http://hd4.wsloan.com/timestore/api/pic/uploadPic' 
                }
            }, 
            handleSuccess(response, file,fileList) {
              this.form.pic = response.data
            },
            handleRemove(file, fileList) {
              this.form.pic = ''
            },
            handleExceed() {
              this.$message({
                message: '只能上传一张图片',
                type: 'error',
                duration: 2000
              })
            },
           canceloffOne(row) {
              this.$confirm("确定将删除记录，您确定要删除吗?", "系统提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(() => {
                this.delete(row.id)
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }).catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除"
                });
              });
              
            },
            handleCurrentChange(val) {
              this.page.currentPage = val;
              this.tableList();
              console.log(val);
            },
            showCateDialog() {
             
            },
            //新增
            newlybuild(){
              this.goodsCates.show = true;
              this.newTitle = '新建仓库';
              this.form.depotName	= '';
              this.form.linkMan = '';
              this.form.linkWay = '';
              this.form.address = '';
              this.form.serviceTime = ''
              this.form.pic = ''
              this.fileList = []
            },
            //编辑
            editClick(row){
              console.log(row);
              this.form.depotName	= row.depotName;
              this.form.linkMan = row.linkMan;
              this.form.linkWay = row.linkWay;
              this.form.address = row.address;
              this.form.serviceTime = row.serviceTime
              this.form.pic = row.pic;
              this.fileList = [{
                url: this.form.pic
              }]
              this.form.status = row.status == 0?0:1;
              this.form.id = row.id;
              this.goodsCates.show = true;
              this.newTitle = '编辑仓库'
            },
            //提交
            submitForm(formName) {
              // console.log(formName)
              var that = this
                 if(that.newTitle == '新建仓库'){
                   console.log(formName)
                  that.addList();
                 }else{
                  that.updateList(that.form)
                 }
            },
            //货位管理
            cargo(row){
              this.$router.push({
                path: '/detail',
                params: {
                  id: row.id
                }
              })
              sessionStorage.setItem('id', row.id)
            },
    
            //状态
            stopstatus(row){
             
              let status = ''
              if(row.status=="0"){
                status = '禁用'
              }else{
                status = '启用'
              }
              
              
              
              this.statusid.status = row.status == 0?1:0;
              this.statusid.id = row.id;
              this.$confirm("确认是否"+status, {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(() => {
                this.storestatus(this.statusid);
                this.$message({
                  type: "success",
                  message: "操作成功!"
                });
              }).catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消"
                });
              });
            },
            //初始化数据
            async tableList() {
              var that = this
              that.$post({
                    api: "/depot/get/getDepotList",
                    data: that.page
                }).then(({ data }) => {
                if(data.code === 0){
                    that.tableData = data.data.list;
                    that.page.total = data.data.total;
                }
                console.log("entrustList",data)
                });
              
            },
        //    //添加
          addList() {
             console.log(110)
              try {
               this.$post({
                  api: "/depot/add/depot",
                  data:this.form
                }).then(({ data }) => {
                if (data.code === 0) {
                  console.log(111)
                  this.$message({
                  type: "success",
                  message: data.msg
                });
                this.goodsCates.show = false;
                this.tableList();
                  // console.log(data)
                  // this.rawList = data.data;
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              });
              } catch (e) {
                this.$message({
                  type: "error",
                  message: "接口报错"
                });
              }
            },
        //     //编辑
            async updateList(params) {
              try {
                let { data } = await this.$post({
                  api: "/depot/update/depot",
                  data:params
                });
                if (data.code === 0) {
                  console.log(data)
                  this.$message({
                  type: "success",
                  message: data.msg
                });
                this.goodsCates.show = false;
                this.tableList();
                // this.$refs[formName].resetFields();
                  // console.log(data)
                  // this.rawList = data.data;
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                this.$message({
                  type: "error",
                  message: "接口报错"
                });
              }
            },
            //删除
            async delete(id) {
              try {
                let { data } = await this.$post({
                  api: "/depot/delete/depot",
                  data:{
                    id:id
                  }
                });
                console.log(data)
                if (data.code === 0) {
                 
                  this.$message({
                  type: "success",
                  message: data.msg
                });
                // this.goodsCates.show = false;
                this.tableList();
                // this.$refs[formName].resetFields();
                  // console.log(data)
                  // this.rawList = data.data;
                } else {
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              } catch (e) {
                this.$message({
                  type: "error",
                  message: "接口报错"
                });
              }
            },
        //     //状态
            async storestatus(params){
              try{
                let {data} = await this.$post({
                  api: "/depot/update/status",
                  data:params
                })
                if(data.code === 0){
                  this.$message({
                  type: "success",
                  message: data.msg
                 });
                  this.tableList();
                  // console.log(data)
                }else{
                  this.$message({
                    type: "error",
                    message: data.msg
                  });
                }
              }catch(e){
                this.$message({
                  type: "error",
                  message: "接口报错"
                });
              }
            }
          }
        };
      </script>
      
      <style lang="scss" scoped>
        .query {
          overflow: hidden;
          border-bottom: 1px solid #eeeeee;
          &-item {
            float: left;
            margin: 15px 20px;
          }
          .el-input {
            width: 150px;
          }
          .el-button {
            margin: 0 15px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      
        .entry-info {
          padding: 15px 20px;
          border-bottom: 1px solid #eeeeee;
        }
      
        .goods-category {
          line-height: 32px;
          span {
            color: #0033ff;
            text-decoration: underline;
            cursor: pointer;
          }
        }
      
        .goods-count {
          line-height: 32px;
        }
      
        .goods-id {
          display: flex;
          justify-content: space-between;
          padding: 0 40px;
          border-left: 1px solid #000;
          border-right: 1px solid #000;
          span {
            position: relative;
            display: inline-block;
            padding: 8px 15px;
            border: 1px solid #333;
            &:after {
              content: "";
              position: absolute;
              top: -6px;
              left: -6px;
              width: 100%;
              height: 100%;
              padding: 6px;
              border: 1px solid #333;
            }
          }
        }
      
        .wrapper {
          padding: 10px 15px;
        }
      
        .canceloff-btn {
          color: #0033ff;
          cursor: pointer;
        }
      </style>
    
    